<template>
  <div class="panel-container" v-if="visible">
    <div class="panel-header">
      <h3>{{ title }}</h3>
      <div class="close-btn" v-if="showClose" @click="$emit('close')">×</div>
    </div>
    <div class="panel-body">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  visible: {
    type: Boolean,
    default: true
  },
  showClose: {
    type: Boolean,
    default: false
  }
});

defineEmits(['close']);
</script>

<style lang="scss" scoped>
.panel-container {
  background: rgba(5, 34, 73, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  
  .panel-header {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: normal;
      color: white;
    }
    
    .close-btn {
      cursor: pointer;
      font-size: 20px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      
      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
    }
  }
  
  .panel-body {
    padding: 15px;
    color: white;
  }
}
</style> 